﻿@{
    ViewBag.Title = "TabStrip : Add and Remove Tabs";
}

<h2>TabStrip : Close Tab With Image</h2>

<h3>Sample</h3>

@{
    Html.Telerik().TabStrip()
        .Name("SampleTabStrip")
        .Items(tabstrip =>
        {
            tabstrip.Add()
                .Text("Tab 1")
                .Selected(true)
                .Content(
                    @<text>
                    <p>Content for the first tab.</p>
                    </text>
                );
            tabstrip.Add()
                .Text("Tab 2")
                .Content(
                    @<text>
                    <p>Content for the second tab.</p>
                    </text>
                );
            tabstrip.Add()
                .Text("Tab 3")
                .Content(
                    @<text>
                    <p>Content for the third tab.</p>
                    </text>
                );
            tabstrip.Add()
                .Text("Tab 4")
                .Content(
                    @<text>
                    <p>Content for the forth tab.</p>
                    </text>
                );
        })
        .ClientEvents(events => events.OnLoad("SampleTabStrip_onLoad"))
        .Render();
}

<br />

<h3>Documentation</h3>
<p>
The OnLoad client event is added to the tabstrip.  The event handler is called SampleTabStrip_onLoad.  In the SampleTabStrip_onLoad
I loop through the all the tabs and add an achor.  The anchor uses the css class: tce-tab-close.  The tce-tab-close class 
(defined in: Content/telerik-extensions.css) sets the background-image style to the image located at: Content/images/tab-close.gif.
The anchor defines the onclick event so that when the image is clicked, the closeTab function is called.
</p>
<p>
Here is the code for the SampleTabStrip_onLoad event handler:
</p>
<pre class="code">
SampleTabStrip_onLoad=function (e) {
    $.each($('#SampleTabStrip').find('li.t-item'),function (idx,tab) {
        $(tab).append("&lt;a class='tce-tab-close' onclick=\"closeTab("+idx+");\" />");
    });
}
</pre>
<p>
Here is the code for the closeTab:
</p>
<pre class="code">
closeTab=function (idx) {
    $('#SampleTabStrip').data('tTabStrip').removeTab({ index: idx });
}
</pre>

<script type="text/javascript">
    SampleTabStrip_onLoad=function (e) {
        $.each($('#SampleTabStrip').find('li.t-item'),function (idx,tab) {
            $(tab).append("<a class='tce-tab-close' onclick=\"closeTab('"+$(tab).text()+"');\" />");
        });
    }

    closeTab=function (text) {
        $('#SampleTabStrip').data('tTabStrip').removeTab({ text: text });
    }
</script>
